<template>
  <div id="log">
    <!-- 搜索 -->
    <div class="top">
      <el-form :model="ParmasPage" label-position="top" type="flex" justify="center">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="模块名">
              <el-input
                v-model="ParmasPage.module"
                style="width: 250px"
                size="large"
                clearable
                placeholder="请输入模块名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="选择时间">
              <el-date-picker
                v-model="ParmasPage.createTime"
                style="width: 250px"
                size="large"
                clearable
                format="YYYY/MM/DD"
                value-format="YYYY-MM-DD hh:mm:ss"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6"> </el-col>
          <el-col :span="6" style="margin-top: 40px; padding-left: 40px">
            <el-form-item>
              <el-button
                round
                size="large"
                style="width: 80px; background-color: #05cc95; color: #fff"
                @click="Btnsearch"
              >
                搜索
              </el-button>
              <el-button round size="large" style="width: 80px" @click="resetBtn">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 底部表格 -->
    <div class="table">
      <el-table style="border: 1px solid #f1f1f1" :data="List" stripe empty-text="暂无数据">
        <el-table-column align="center" label="序号" width="100px">
          <template v-slot="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="用户名"></el-table-column>
        <el-table-column prop="query" align="center" label="请求方式"></el-table-column>
        <el-table-column prop="address" align="center" label="访问地址"></el-table-column>
        <el-table-column prop="module" align="center" label="模块名称"></el-table-column>
        <el-table-column prop="createTime" align="center" label="操作时间"></el-table-column>
      </el-table>
      <el-row justify="center">
        <el-col :span="24" class="pagination-col">
          <el-pagination
            :page-sizes="[10, 20, 30]"
            :current-page="ParmasPage.page"
            :small="small"
            layout="total, sizes, prev, pager, next, jumper"
            :total="ParmasPage.total"
            :background="false"
            @current-change="changePage"
            @size-change="changeSize"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getlogquery } from '@/api/systemlog.js'
const ParmasPage = ref({
  size: 10,
  page: 1,
  total: 0,
  name: '',
  createTime: ''
})
// 表格绑定值
const List = ref([{}])
// 获取分页列表
const getlogList = async () => {
  const { data, total } = await getlogquery(ParmasPage.value)
  List.value = data
  ParmasPage.value.total = total
}
onMounted(() => {
  getlogList()
})
// 搜索
const Btnsearch = async () => {
  console.log(ParmasPage.value)
  ParmasPage.value.page = 1
  getlogList()
}
// 重置
const resetBtn = () => {
  ParmasPage.value = {
    size: 10,
    page: 1,
    total: 0
  }
  getlogList()
}
// 切换分页
const changePage = async (newPage) => {
  ParmasPage.value.page = newPage
  await getlogList()
}
// 切换分页显示数据量
const changeSize = async (newSize) => {
  ParmasPage.value.size = newSize
  ParmasPage.value.page = 1
  await getlogList()
}
</script>
<style lang="less" scoped>
#log {
  width: 100%;
  background-color: #fff;
  padding: 50px 30px 30px 30px;
}
::v-deep .el-input__wrapper {
  background-color: #f5f5f5;
}
.table {
  margin-top: 30px;
  padding: 0 20px;
}

/* 定义表头样式 */
::v-deep .el-table th {
  text-align: center;
  background-color: #eaf1ef; /* 设置表头颜色 */
  color: #666; /* 设置表头文字颜色 */
}
.pagination-col {
  display: flex;
  margin-top: 20px;
  justify-content: center;
}
</style>
